<template>
  <div class="dashboard">
    <el-row :gutter="10">
      <el-col :span="7">
        <card title="分类商品数据(饼图)">
          <pie-echart :pieData="categoryGoodsCount" />
        </card>
      </el-col>
      <el-col :span="10">
        <card title="不同城市商品销量">
          <map-echart :mapData="addressGoodsSale" />
        </card>
      </el-col>
      <el-col :span="7">
        <card title="分类商品数据(玫瑰图)">
          <rose-echart :roseData="categoryGoodsCount"></rose-echart>
        </card>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="margin-top: 10px">
      <el-col :span="12">
        <card title="分类商品的销量">
          <line-echart :lineData="categoryGoodsSale"></line-echart>
        </card>
      </el-col>
      <el-col :span="12">
        <card title="分类商品的收藏">
          <bar-echart v-bind="categoryGoodsFavor"></bar-echart>
        </card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import { useStore } from '@/store'
import card from '@/base-ui/card'
import {
  pieEchart,
  roseEchart,
  lineEchart,
  barEchart,
  mapEchart
} from '@/components/page-echarts'

export default defineComponent({
  name: 'dashboard',
  setup() {
    const store = useStore()
    store.dispatch('dashboard/getDashboardDataAction')

    const categoryGoodsCount = computed(() => {
      return store.state.dashboard.categoryGoodsCount.map((item) => {
        return {
          name: item.name,
          value: item.goodsCount
        }
      })
    })

    const categoryGoodsSale = computed(() => {
      const xData: string[] = []
      const yData: number[] = []
      store.state.dashboard.categoryGoodsSale.forEach((item: any) => {
        xData.push(item.name)
        yData.push(item.goodsCount)
      })
      return { xData: xData, yData: yData }
    })

    const categoryGoodsFavor = computed(() => {
      const dataAxis: string[] = []
      const data: number[] = []

      store.state.dashboard.categoryGoodsFavor.forEach((item: any) => {
        dataAxis.push(item.name)
        data.push(item.goodsFavor)
      })

      return {
        dataAxis: dataAxis,
        data: data
      }
    })

    const addressGoodsSale = computed(() => {
      return store.state.dashboard.addressGoodsSale.map((item: any) => {
        return { name: item.address, value: item.count }
      })
    })
    return {
      categoryGoodsCount,
      categoryGoodsSale,
      categoryGoodsFavor,
      addressGoodsSale
    }
  },
  components: {
    card,
    pieEchart,
    roseEchart,
    lineEchart,
    barEchart,
    mapEchart
  }
})
</script>

<style scoped></style>
